import {size} from '@/app/utils';
import React,{useState,useEffect} from 'react';
import {
  View,
  Text,
  Image,
  TextInput,
  StatusBar,
  Modal,
  Pressable,
  Alert
} from 'react-native';
import Button from '@/app/components/Button'
import { useTranslation } from '@/app/utils/useTranslation';
import {styles} from './style/LoginScreenCss'
import Headers from '@/app/components/header/Headers';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {getSignUp,getEditPwd} from './serve'
import { useNavigation ,useRoute} from "@react-navigation/native";
let ForgetPasswordStep3Screen = (props:any)=>{
    const { t } = useTranslation();
    const route:any = useRoute();
    const insets = useSafeAreaInsets();
    const navigation:any = useNavigation(); 
    interface Step3Params {
        code: string;
        loginName: string;
        name: string;
        yanzhenngma:string
    }
    let [eye,setEye] = useState(false);
    let [eye1,setEye1] = useState(false);
    let [password,setPassword] = useState('');
    let [againPassword,setAgainPassword] = useState('');
    let [disabled,setDisabled] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    let [paramsData,setParamsData] = useState<Partial<Step3Params>>({});

    function onResetPassword(){
       if(!password){
           return global.$toast(t('t380'));
       }
       if(!againPassword){
           return global.$toast(t('t381'));
       }
       const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z0-9]{6,16}$/;
       if(!passwordRegex.test(password)){
           return global.$toast(t('t382'));
       }
       if(!passwordRegex.test(againPassword)){
           return global.$toast(t('t383'));
       }
       if(password !== againPassword){
           return global.$toast(t('t384'));
       }
       let params = {
            ...paramsData,
            password,
            commitPwd:againPassword,
       }
       setDisabled(true)
       if(paramsData.name=='zhuce'){
            getSignUp(params).then(()=>{
                setDisabled(false)
                setModalVisible(true);
            }).catch(()=>{
                setDisabled(false)
            })
       }else if(paramsData.name=='wangjimima'){
            getEditPwd(params).then(res=>{
                setDisabled(false);
                setModalVisible(true);
            }).catch(()=>{
                setDisabled(false)
            })
       }
    }

    function onSignIn(){
        setModalVisible(false);
        navigation.reset({
            index: 0,
            routes: [{ name: 'login' }],
        });
    }

    useEffect(()=>{
            StatusBar.setBarStyle('dark-content');
            let params = route.params||{};
            setParamsData(params as Step3Params);
    },[]);

    const getTitle=()=>{

        if(paramsData.name=='zhuce'){
            return t('t386')
        }else if(paramsData.name=='wangjimima'){
            return t('t364')
        }
    }

    const getBtnTitle=()=>{
        if(paramsData.name=='zhuce'){
            return t('t386')
        }else if(paramsData.name=='wangjimima'){
            return t('t364')
        }
    }

    const getModalTitle=()=>{
        if(paramsData.name=='zhuce'){
            return t('t387')
        }else if(paramsData.name=='wangjimima'){
            return t('t388')
        }
    }

    const getModalDesc=()=>{
        if(paramsData.name=='zhuce'){
            return t('t389')
        }else if(paramsData.name=='wangjimima'){
            return t('t390')
        }
    }

    return (
         <View style={{ flex: 1,backgroundColor:"#fff"}}>
            <Headers
                title={''}
                border={false}
                barStyle={0}
                leftTitle={''}
                backgroundColor={'#fff'}
                centerColor={'#666'}
                {...props}
                leftIcon={require('@/assets/images/icon/back.png')}
            />
            <KeyboardAwareScrollView style={{ flex:1,paddingTop:size(40)}}>
                <View style={styles.form}>
                    <View>
                        <View>
                            <Text style={styles.title}>{getTitle()}</Text>
                        </View>
                        <View>
                            <Text style={styles.subtitle}>{t('t391')}</Text>
                        </View>
                    </View>
                    <View style={[styles.formItem, { marginTop: 15 }]}>
                        <TextInput
                            value={password}
                            onChangeText={(text) => {
                                setPassword(text);
                            }} style={styles.input} placeholder={t('t392')} secureTextEntry={!eye1}/>
                            <Pressable onPress={()=>{
                                setEye1(!eye1);
                            }}>
                                <Image style={styles.icon} source={eye1?require('@/assets/images/noeye.png'):require('@/assets/images/eye.png')} />
                            </Pressable>
                    </View>
                    <View style={[styles.formItem, { marginTop: 15 }]}>
                        <TextInput
                            value={againPassword}
                            onChangeText={(text) => {
                                setAgainPassword(text);
                            }} style={styles.input} placeholder={t('t393')} secureTextEntry={!eye}/>
                            <Pressable onPress={()=>{
                                setEye(!eye);
                            }}>
                                <Image style={styles.icon} source={eye?require('@/assets/images/noeye.png'):require('@/assets/images/eye.png')} />
                            </Pressable>
                    </View>
                </View>
            </KeyboardAwareScrollView>
            <View>
                <View style={[{ marginTop: 20, paddingLeft: size(30), paddingRight: size(30),paddingBottom:size(insets.bottom?insets.bottom:10)}]}>
                    <Button 
                        onClick={() => {
                            onResetPassword();
                        }}
                        disabled={disabled}
                        style={styles.login_box_footer_btn}
                    >
                        <Text style={[styles.login_box_footer_btn_text]}>{getBtnTitle()}</Text>
                    </Button>
                </View>
            </View>
            <Modal
                animationType="fade"
                transparent={true}
                statusBarTranslucent={true}
                visible={modalVisible}
                presentationStyle="formSheet"
                onRequestClose={() => {
                    Alert.alert('Modal has been closed.');
                }}>
                    <View style={styles.centeredView}>
                        <View style={styles.modalView}>
                            <View>
                                <Image
                                    source={
                                        require('@/assets/images/success.png')
                                    }
                                    style={[styles.SuccessIconImage]}
                                />
                            </View>
                           <View style={{flex:1,alignItems:"center"}}>
                                <View style={styles.modalTitleText}>
                                    <Text style={styles.modalTitleTextStyle}>
                                        {getModalTitle()}
                                    </Text>
                                </View>
                                <View style={styles.modalSuccessdesc}>
                                    <Text style={styles.modalSuccessdescText}>
                                        {getModalDesc()}
                                    </Text>
                                </View>
                           </View>
                            <View style={{marginBottom:size(50),width:"100%",paddingLeft:size(20),paddingRight:size(20)}}>
                                <Button 
                                    onClick={() => {
                                        onSignIn();
                                    }}
                                    style={styles.login_box_footer_btn}
                                >
                                    <Text style={[styles.login_box_footer_btn_text]}>{t('t371')}</Text>
                                </Button>
                            </View>
                        </View>
                    </View>
            </Modal>
        </View>
    )
}

export default ForgetPasswordStep3Screen;